React Native — Flexbox Alignment and Sizing

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Align Content

We can use the alignContent property to set the alignment of the items in our React Native view.

For example, we can write:

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignContent: 'flex-end'
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the alignContent to 'flex-end' with the flexDirection set to 'row' to put the inner views at the bottom of the screen.

The alignContent property is only applied when we set the flexWrap property.

The default value of 'flex-start' which puts the items at the top of the screen.

Other values include 'stretch' , 'center' , 'space-between' , and 'space-around' .

'stretch' stretches the items into the screen.

'center' centers the content.

'space-between' puts space between the item.

And 'space-around' makes the rows or columns evenly spaced.

Flex Wrap

The flexWrap property lets us set whether to wrap our rows or columns.

For instance, if we have:

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignContent: 'flex-end'
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the flexWrap property to 'wrap' so that we wrap the rows.

Flex Basis, Grow, and Shrink

flexGrow describes how spaces within a container should be distributed among its children along the main axis.

It accepts any floating-point value bigger than or equal to 0.

flexShrink describes how to shrink children along the main axis in the case when the total size of the children overflows the size of the container.

It can also be bigger than or equal to 0.

flexBasis is an axis-independent way of providing the default size of an item along the main axis.

The flexBasis of a child is like setting the width of the child if its parent is a container with flexDiection set to row or setting the height of the child if it’s parent is a container with flexDiection set to column .

For example, we can use them by writing:

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
    }}>
      <View style={{ flexBasis: 200, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ flexGrow: 1, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ flexGrow: 3, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We use flexBasis to set the first view to 200px wide.

The rest are spread proportionally across the rest of the screen with the flexGrow properties.

This means 1/4 of the rest of the screen has the 2nd view.

And the rest of the screen has the 3rd view.

Conclusion

We can set flexbox properties to size and align content within React Native apps.